<template>
  <div class="roleManage">
    <basic-container>
      <div>
        <m-s-search @searchClick="(v) => {(queryForm = v), getList();}" :list="option.column"></m-s-search>
      </div>
      <avue-crud
          :option="option"
          :data="treeData"
          :table-loading="loading"
          ref="curd">
        <template slot="menuLeft">
          <el-button
              size="small"
              type="primary"
              @click="addToTabsList('部门', { oid: -1 }, 'departmentManageTemp', 'open')">新增
          </el-button>
          <el-button size="small" type="primary" @click="addToTabsList('导入部门信息', { oid: -1 }, 'departmentManageFileTemp', 'new')">导入</el-button>
        </template>
        <template #icon="scope">
          <i :class="scope.row.icon" style="font-size: 24px"></i>
        </template>
        <template slot="menu" slot-scope="{ row }">
          <el-button
              type="text"
              @click="addToTabsList('部门', row, 'departmentManageTemp', 'view')">
            查看详情
          </el-button>
          <el-button
              type="text"
              @click="addToTabsList('部门', {oid: -1,parentId: row.pid}, 'departmentManageTemp', 'open')">
            添加子部门
          </el-button>
          <el-button
              type="text"
              @click="addToTabsList('部门', row, 'departmentManageTemp', 'edit')">
            修改
          </el-button>
          <el-button type="text" @click="remove(row)"> 删除</el-button>
        </template>
      </avue-crud>
      <ms-drawer
          @refresh="getList()"
          ref="md"
          :visible.sync="visible"
          :tab-list.sync="tabsList"
      ></ms-drawer>
    </basic-container>
  </div>
</template>

<script>
import * as deptApi from "@/api/departmentManage/departmentManage";
import MSSearch from "@/DMDComponents/MSSearch.vue";

export default {
  name: "departmentManage",
  components: {MSSearch},
  data() {
    return {
      tabsList: [],
      visible: false,
      treeData: [], // 树数据
      loading: false,
      option: {
        height: "auto",
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: false,
        labelWidth: 120,
        menuWidth: 300,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        align: "center",
        rowKey: "pid",
        rowParentKey: "parentId",
        column: [
          {
            label: "部门名称",
            prop: "nameCn",
          },
          {
            label: "部门编码",
            prop: "name",
          },
          // {
          //   label: "排序",
          //   prop: "sort",
          // },
          {
            label: "创建时间",
            prop: "createTime",
          },
        ],
      },
    };
  },
  methods: {
    // 向抽屉中添加tab页 根据 oid 去重
    addToTabsList(title, row, component, type) {
      let ids = this.tabsList.map((item) => item.row[this.idKey]);
      if (!ids.includes(row[this.idKey])) {
        this.tabsList.push({title, row, component, type});
      }
      this.visible = true;
    },
    // 删除
    remove(data) {
      this.$confirm("是否删除？").then(() => {
        deptApi.del({id: data.pid}).then(() => {
          this.$message.success("删除成功");
          this.getList();
        });
      });
    },
    getList() {
      this.loading = true;
      deptApi.getList().then((res) => {
        this.treeData = res.data.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
